/**
 * 运单管理 - 检索模块
 * @author xiaoxujs
 */

import { Button, DatePicker, Form, FormProps, Input } from "antd";
import { SearchBox } from "../../style";
import { ITlplTPlanPageListForm } from "../../../../../type/WaybillManagement/form";
import { FC } from "react";
import dayjs from "dayjs";
import { ITlplTPlanPageListSearch } from "../../../../../type/WaybillManagement/api";

const { RangePicker } = DatePicker;

const Search: FC<{
    handleSearchCallback: (data: ITlplTPlanPageListSearch) => void;
}> = ({
    handleSearchCallback
}) => {
    const [form] = Form.useForm<ITlplTPlanPageListForm>();
    const {  resetFields } = form;
        const onFinish: FormProps<ITlplTPlanPageListForm>['onFinish'] = (values) => {
            console.log('Success:', values);
            const params = {
                consignee: values.consignee,
                startDate: (values && values.date) ? dayjs(values.date[0]).format('YYYY-MM-DD') : undefined,
                endDate: (values && values.date) ? dayjs(values.date[1]).format('YYYY-MM-DD') : undefined
            }
            handleSearchCallback(params)
        };
        // 重置
        const handleReset = () => {
            resetFields();
            handleSearchCallback({})
        }
        return <SearchBox>
            <Form
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                onFinish={onFinish}
                layout="inline"
                form = {form}
            >
                <Form.Item<ITlplTPlanPageListForm>
                    label="收货单位"
                    name="consignee"
                >
                    <Input placeholder="请输入收货单位名称" />
                </Form.Item>

                <Form.Item<ITlplTPlanPageListForm>
                    label="装运日期"
                    name="date"
                >
                    <RangePicker />
                </Form.Item>


                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button style={{ border: '.1rem solid #C8E3FF' }} color="primary" variant="filled" htmlType="submit" icon={<span className="iconfont">&#xe60e;</span>}>
                        查询
                    </Button>

                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button onClick={() => handleReset()} icon={<span className="iconfont">&#xe67d;</span>}>
                        重置
                    </Button>

                </Form.Item>
            </Form>
        </SearchBox>
    }

export default Search;
